<template>
  <!-- 数钞票 -->
  <div class="countMoney-wrap">
    <transition enter-active-class="slideInRight faster animated">
      <wait v-if="gameStatus === 1" />
      <countMoneyMain v-if="gameStatus === 2" />
      <rank v-if="gameStatus === 3" type="countMoney" />
    </transition>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import bgm from '@/assets/constant/audio';
import wait from '@/views/countMoney/wait.vue';
import countMoneyMain from '@/views/countMoney/main.vue';
import rank from '@/components/gameRank/rank.vue';
import createjs from 'createjs-cmd';

export default {
  name: 'hbyIndex',
  computed: {
    ...mapState({
      gameStatus: (state) => state.game.gameStatus,
    }),
  },
  components: {
    wait,
    countMoneyMain,
    rank,
  },
  data() {
    return {};
  },
  watch: {
    // gameStatus: function gameStatus(newVal) {
    //   if (newVal === 3) {
    //     this.$router.replace('/');
    //   }
    // },
  },
  created() {
    // this.loadAudioFile(bgm.countMoney)
    //   .then((res) => {
    //     console.log(res);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
    this.loadAudioFile();
  },
  methods: {
    // 加载音频文件
    loadAudioFile() {
      const loader = new createjs.LoadQueue(true);
      loader.installPlugin(createjs.Sound);
      loader.loadFile({ id: 'count', src: bgm.countMoney });
      loader.on('complete', () => {
        console.log('音频加载成功');
      });
    },
  },
  beforeCreated() {},
};
</script>
<style lang="less" scoped>
.countMoney-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url(https://static.hudongmiao.com/joymewH5/img/countMoney/bg.png);
  background-size: 100% 100%;
  overflow: hidden;
}
</style>
